<template>
  <div class="app-container">
    <el-container>
      <el-header>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-row :gutter="20">
              <el-col :span="12">
                <el-input
                  v-model="kwInput"
                  placeholder="输入关键词进行筛选"
                  class="input-with-select"
                  clearable
                  @keyup.native.enter="handleSearch"
                >
                  <el-button slot="append" icon="el-icon-search" @click="handleSearch">搜索</el-button>
                </el-input>
              </el-col>
              <el-col :span="12">
                <el-button
                  type="success"
                  title="添加"
                  icon="el-icon-plus"
                  @click="dialogVisible=true"
                >添加词库
                </el-button>
              </el-col>
            </el-row>
          </el-col>
        </el-row>
      </el-header>
      <el-container>
        <el-main>
          <el-table v-loading="listLoading" :data="data" border fit highlight-current-row style="width: 100%">
            <el-table-column align="left" label="区域" width="80" prop="zone" sortable="custom" />
            <el-table-column align="left" label="节点" prop="instance" sortable="custom" />
            <el-table-column align="left" label="表名" prop="tablename" />
            <el-table-column align="center" label="操作" width="240" fixed="right">
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  icon="el-icon-edit"
                  type="warning"
                  plain
                  @click="handleShow(scope.row)"
                >管理
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-main>
      </el-container>
    </el-container>
    <el-dialog
      title="添加表格"
      :visible.sync="dialogVisible"
      width="40%"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
    >
      <el-form
        ref="dataForm"
        :model="temp"
        label-position="left"
        label-width="120px"
        style="margin-left: 8%"
      >
        <el-form-item label="选择博客" label-width="120px">
          <el-button size="mini" type="primary" @click="promoteVisiable=true">选择博客</el-button>
        </el-form-item>
        <el-form-item label="关键词" label-width="120px">
          <el-input v-model="temp.keywords" type="textarea" :rows="10" />
        </el-form-item>
        <el-form-item label="category" label-width="120px">
          <el-input v-model="temp.category" />
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
      </span>
    </el-dialog>
    <hk_autoseo_seed_keywords :is-visible="hk_autoseo_seed_keywordsVisible" @close="hk_autoseo_seed_keywordsVisible=false" />
  </div>
</template>

<script>
import Wppromote from '../cms/elements/wppromote'
import Hk_autoseo_seed_keywords from './element/hk_autoseo_seed_keywords'

export default {
  components: { Hk_autoseo_seed_keywords, Wppromote },
  data() {
    return {
      hk_autoseo_seed_keywordsVisible: false,
      dialogVisible: false,
      temp: {
        keywords: '',
        category: '',
        root_domain: ''
      },
      data: [
        {
          zone: 'honkong',
          instance: 'autoseo',
          tablename: 'seed_keywords',
          element_key: 'hk_autoseo_seed_keywordsVisible'
        }
      ],
      kwInput: '',
      listLoading: false,
      order_by: 'id',
      order_desc: '1',
      // pagination
      pagesize: 10,
      page: 1,
      total: 0
    }
  },
  methods: {
    handleShow(row) {
      switch (row.element_key) {
        case 'hk_autoseo_seed_keywordsVisible':
          this.hk_autoseo_seed_keywordsVisible = true
          break
      }
    },
    resetTemp() {
      this.temp = {
        keywords: '',
        category: '',
        root_domain: ''
      }
    },
    handleSearch() {
      console.log('search')
    }
  }
}
</script>

<style scoped>

.el-header, .el-footer {
  background-color: #fff;
  color: #333;
  text-align: left;
  line-height: 60px;
}

.el-aside {
  background-color: #fff;
  border-left: 1px solid #ebeef5;
  color: #333;
  padding-top: 20px;
  padding-left: 10px;
  line-height: 250px;
}

.el-main {
  background-color: #fff;
  color: #333;
  text-align: center;
}

body > .el-container {
  margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}

.el-tag + .el-tag {
  margin-left: 10px;
}

/*.top {*/
/*padding-left: 20px;*/
/*padding-right: 20px;*/
/*margin-bottom: 5px;*/
/*margin-top: 28px;*/
/*}*/

/*.head {*/
/*width: calc(20% - 70px);*/
/*}*/

/*.web {*/
/*margin-top: 10px;*/
/*margin-bottom: 10px;*/
/*display: inline-block;*/
/*width: 100%;*/
/*}*/

.web >>> .el-input {
  min-width: 1200px;
}

.app-container >>> .el-dialog {
  margin-top: 48px !important;
  margin-bottom: 68px;
}

.mt-detail:hover, .svg-icon:hover {
  cursor: pointer;
}

.mt-detail {
  color: #1976d2;
}

.mt-dialog >>> .el-dialog {
  margin: 88px auto !important;
}

.clearfix ::after {
  content: "";
  clear: both
}

.mt-table {
  color: black;
  padding: 20px;
}

.mt-pagination {
  float: right;
  margin-top: 10px;
}

.mt-top {
  margin: 15px 0;
}

.mt-row-btn {
  float: right;
  vertical-align: middle;
  color: white;
}

.mt-btn {
  background-color: rgba(0, 0, 0, 0);
  background-image: none;
  border-radius: 1000px;
  border-bottom-style: solid;
  border-bottom-width: 1px;
  border-collapse: collapse;
  border-image-outset: 0px;
  border-image-repeat: stretch;
  border-image-slice: 100%;
  border-image-source: none;
  border-image-width: 1;
  border-left-style: solid;
  border-left-width: 1px;
  border-right-style: solid;
  border-right-width: 1px;
  border-top-style: solid;
  border-top-width: 1px;
  box-sizing: border-box;
  color: #46be8a;
  cursor: pointer;
  display: block;
  float: right;
  font-family: "Helvetica Neue", Helvetica, Tahoma, Arial, "Microsoft Yahei", "Hiragino Sans GB", "WenQuanYi Micro Hei", sans-serif;
  font-size: 14px;
  font-weight: 400;
  height: 26px;
  hyphens: manual;
  line-height: 14px;
  margin-bottom: 0px;
  margin-right: 10px;
  padding: 5px;
  text-align: center;
  text-decoration-color: rgb(82, 96, 105);
  text-decoration-line: none;
  text-decoration-style: solid;
  text-rendering: optimizeLegibility;
  text-size-adjust: 100%;
  touch-action: manipulation;
  transition-delay: 0s, 0s, 0s, 0s;
  transition-duration: 0.2s, 0.2s, 0.2s, 0.2s;
  transition-property: border, color, width, background-color;
  transition-timing-function: linear, linear, linear, linear;
  user-select: none;
  vertical-align: middle;
  visibility: visible;
  white-space: nowrap;
  background: white;
}

.mt-btn:hover + >>> .mt-icon {
  color: #fff;
}

.mt-btn:hover {
  background: #46be8a;
}

.danger:hover {
  background-color: #F56C6C;
}

.danger {
  color: #F56C6C;
}

.default:hover {
  background-color: #62a8ea;
}

.default {
  color: #62a8ea;
}

.edit:hover {
  background-color: #909399;
}

.edit {
  color: #909399;
}

.mt-row-title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: calc(100% - 220px);
  display: inline-block;
  vertical-align: middle;
}

.mt-row-btns {
  float: right;
  margin-right: 10px;
  z-index: 10000;
}

</style>
